<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/index1.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/better-scroll.min.js"></script>
</head>

<body>
    <div class="zoo">
        <div class="header">
            <div class="title">
                <p>奈商城</p>
            </div>
        </div>
        <div class="search">
            <div class="boder">
                <div class="one">
                    <img src="./image/Ellipse 1.png" alt=""> 输入您想要的宝贝..
                </div>
            </div>

            <div class="two">
                <img src="./image/消息.png" alt="">
            </div>
        </div>

        <div class="bannerBox">
            <div class="bannerCon">
                <ul class="dispfx">
                    <li><img src="./image/images/轮播1_02.png" alt=""></li>
                    <li><img src="./image/images/轮播1_02.png" alt=""></li>
                    <li><img src="./image/images/轮播1_02.png" alt=""></li>
                </ul>
            </div>
            <div class="bannerIndicator">
                <ul class="dian">
                    <li class="on"></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="fenlei">
            <ul>
                <li>
                    <img src="./image/人头.png" alt="">
                    <div>菲茨</div>
                </li>
                <li>
                    <img src="./image/口红.png" alt="">
                    <div>克奈圃</div>
                </li>
                <li>
                    <img src="./image/人头2.png" alt="">
                    <div>服饰</div>
                </li>
                <li>
                    <img src="./image/其他.png" alt="">
                    <div>其他</div>
                </li>
            </ul>
        </div>
        <div class="no" style="height: .266rem;">

        </div>
        <div class="tuijian">
            <div class="tj-hd">
                <img src="./image/推荐.png">
            </div>
            <div class="shangpin">
                <ul>
                    <li>
                        <div class="img img1">
                            <img src="./image/images/图1_02.png" class="new">
                        </div>
                        <div class="txt">
                            莫次有机PWE活性美白洗面奶
                        </div>
                        <div class="jiage">
                            ￥169 <s>￥220</s>
                        </div>
                    </li>
                    <li>
                        <div class="img img2">
                            <img src="./image/images/图2_03.png" class="new">
                        </div>
                        <div class="txt">
                            莫次有机PWE活性美白嫩肤霜
                        </div>
                        <div class="jiage">
                            ￥169 <s>￥220</s>
                        </div>
                    </li>
                    <li>
                        <div class="img img1">
                            <img src="./image/images/图1_02.png" class="new">
                        </div>
                        <div class="txt">
                            莫次有机PWE活性美白洗面奶
                        </div>
                        <div class="jiage">
                            ￥169 <s>￥220</s>
                        </div>
                    </li>
                    <li>
                        <div class="img img2">
                            <img src="./image/images/图2_03.png" class="new">
                        </div>
                        <div class="txt">
                            莫次有机PWE活性美白嫩肤霜
                        </div>
                        <div class="jiage">
                            ￥169 <s>￥220</s>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer">
            <ul>
                <li>
                    <img src="./image/首页-选中.png">
                    <div class="blue">首页</div>
                </li>
                <li>
                    <img src="./image/购物车.png">
                    <div>购物车</div>
                </li>
                <li>
                    <img src="./image/我的.png">
                    <div>我的</div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        // 轮播图
        var bs = BetterScroll.createBScroll(".bannerCon", {
            // ① 开启横向滚动，禁止纵向滚动
            scrollX: true,
            scrollY: false,
            // ② 保留轮播图上，纵向的原生滚动
            eventPassthrough: true,
            // ③ 开启轮播
            slide: {
                loop: true,
                threshold: 0.1,
                speed: 400,
                listenFlick: true,
                autoplay: false,
                interval: 3000
            },
            // 设置为false,解决轮播快速切换时的闪烁问题
            momentum: false,
            // 当loop为true时，设置此项为false,可以解决拖动过快产生空白的问题
            bounce: false
        });
        bs.on('scrollEnd', () => {
            var lis = document.querySelectorAll('.bannerIndicator li');
            var page = bs.getCurrentPage().pageX;
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            lis[page].className = 'on';
        });
        // 底部高亮切换
        var lis = document.querySelectorAll(".footer ul li");

        for (i = 0; i < lis.length; i++) {
            forer(i)
        }

        function forer(i) {
            lis[i].onclick = function() {
                var src = lis[i].children[0].getAttribute("src"); //获取相对位置
                var index = src.lastIndexOf("/") + 2; //获取索引
                var src0 = decodeURI(src.substring(0, index)); //裁剪
                var src1 = src0 + "0.svg"; //拼接

                for (var j = 0; j < lis.length; j++) { //重置所有属性
                    var srcn = lis[j].children[0].getAttribute("src");
                    var index2 = srcn.lastIndexOf("/") + 2;
                    var src2 = decodeURI(srcn.substring(0, index2));
                    var src3 = src2 + ".svg";
                    lis[j].children[0].setAttribute('src', src3);
                    lis[j].children[1].className = '';
                }
                lis[i].children[0].setAttribute('src', src1); //修改src相对路径
                lis[i].children[1].className = 'blue'; //修改文字颜色
            }
        }
    </script>
</body>

</html>